import { isNullObj } from '@/utils';
import { Alert, Button, Space, Table } from 'antd';
import Column from 'antd/es/table/Column';
import classNames from 'classnames/bind';
import { useEffect, useMemo, useState } from 'react';
import { useBoxConfigContext } from '../contexts/BoxConfigContext';
import styles from '../styles/PageList.module.scss';
import Edit from './dialogs/Edit';

const cx = classNames.bind(styles);

const PageList = () => {
  const { boxListData, selectItems, setSelectKey, getBoxListData, delBoxConfigFunc } =
    useBoxConfigContext();
  const [loading, setLoading] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [editVisible, setEditVisible] = useState(false);
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  const [total, setTotal] = useState(0);
  /* 切换页码查找列表 */
  useEffect(() => {
    if (listQuery) {
      setLoading(true);

      getBoxListData(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
          setTimeout(() => {}, 2000);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const showAddBox = (item: any) => {
    setEditItem(item);
    setEditVisible(true);
  };
  return (
    <>
      <div className={cx('auto-filing--container')}>
        <div className={cx('tips')}>
          {/* <Alert
            description="创建和时，需要需要根据和的脊背宽度选择"
            type="info"
            showIcon
            closable
          /> */}
        </div>
        <div className={cx('tabs-wrap')}>
          <Table
            dataSource={boxListData}
            loading={loading}
            rowKey="id"
            size="small"
            scroll={{ x: 'max-content' }}
            bordered
            rowSelection={rowSelection}
            pagination={{
              current: listQuery.pageNo,
              pageSize: listQuery.pageSize,
              total,
              onChange: pageChange
            }}
          >
            <Column title="序号" dataIndex="id" key="id" align="center" />
            <Column title="盒规格名称" dataIndex="name" key="name" align="center" />
            <Column
              title="背柜宽度"
              dataIndex="spineWith"
              key="spineWith"
              align="center"
              render={(_text, record: any) => (
                <p>
                  {_text}
                  {record.spineWithUnit}
                </p>
              )}
            />
            <Column
              title="盒分页数"
              dataIndex="fileMaxPageCount"
              key="fileMaxPageCount"
              align="center"
            />
            <Column title="规格代码" dataIndex="code" key="code" align="center" />
            <Column title="备注" dataIndex="remark" key="remark" align="center" />
            <Column
              title="操作"
              key="action"
              className={cx('action-col')}
              align="center"
              render={(_text, record: any) => (
                <Space>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      showAddBox(record);
                    }}
                  >
                    编辑
                  </Button>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      delBoxConfigFunc(record.id);
                    }}
                  >
                    删除
                  </Button>
                </Space>
              )}
            />
          </Table>
        </div>
        {useMemo(
          () => (
            <Edit
              data={editItem}
              visible={editVisible}
              onClose={() => {
                setEditVisible(false);
              }}
            />
          ),
          [editVisible]
        )}
      </div>
    </>
  );
};
export default PageList;
